<template>
  <div class="container">
    <p class="bold">我们提供</p>
    <div class="rowTwo">
      <ul>
        <li v-for="(item,index) in list1" :key="index" @mouseover="show(index)">
          <img :src="list2[index][0]" alt="" class="img-style">
          <p>{{item[0]}}</p>
          <p>{{item[1]}}</p>
          <p>{{item[2]}}</p>
          <p>{{item[3]}}</p>
          <img src="../../assets/img/mediaIn/provide/line.png" alt="">
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
const img1 = require('../../assets/img/mediaIn/provide/61.png')
const img2 = require('../../assets/img/mediaIn/provide/62.png')
const img3 = require('../../assets/img/mediaIn/provide/63.png')
const img4 = require('../../assets/img/mediaIn/provide/64.png')
const img5 = require('../../assets/img/mediaIn/provide/65.png')
const img6 = require('../../assets/img/mediaIn/provide/66.png')
export default {
  data() {
    return {
      list1: [
        [
          '良好生态',
          '不断完善的生态',
          '连接媒体与广告主',
          '直投、实时竞价等多种交易模式'
        ],
        [
          '流量变现',
          '量身定制变现方案',
          '经验丰富的服务团队',
          '共享收益新机遇'
        ],
        ['专业平台', '一站式聚合优化', '稳定的技术保障', '提供大数据分析建议']
      ],
      list2: [[img1, img4], [img2, img5], [img3, img6]]
    }
  },
  methods: {
    show(index) {
      this.list2[0][0] = img1
      this.list2[1][0] = img2
      this.list2[2][0] = img3
      this.list2[index].splice(0, 1, this.list2[index][1])
    }
  }
}
</script>
<style scoped>
.container {
  width: 1200px;
  margin: 0 auto;
  margin-top: 80px;
  text-align: center;
}
.bold {
  font-size: 30px;
  font-weight: bold;
}
.rowTwo {
  margin-top: 60px;
}
.rowTwo ul {
  overflow: hidden;
  height:280px;
  padding-left:10px;
  position: relative;
}
.rowTwo ul li {
  /* 336 * 3  1008 192 96 */
  width: 336px;
  height: 235px;
  text-align: center;
  float: left;
  margin-left: 86px;
  position: relative;
}
.img-style{
 width: 336px;
  height: 235px;
  position:absolute;
  top:0px;
  left:0px;
  z-index:-1;
}
.rowTwo ul li:nth-child(1) {
  margin-left: 0px;
  background-position: top center;
  background-repeat: no-repeat;
}
.rowTwo ul li:nth-child(2) {
  background-position: top center;
  background-repeat: no-repeat;
}
.rowTwo ul li:nth-child(3) {
  background-position: top center;
  background-repeat: no-repeat;
}
.rowTwo ul li p {
  font-size: 16px;
  color: rgb(34, 34, 34);
  font-weight: bold;
}
.rowTwo ul li p:nth-child(2) {
  position: absolute;
  font-size: 16px;
  color: #fff;
  top: 45px;
  left: 136px;
}
.rowTwo ul li p:nth-child(3) {
  margin-top: 102px;
}
.rowTwo ul li p:nth-child(4),
.rowTwo ul li p:nth-child(5) {
  margin-top: 20px;
}
.rowTwo ul li img {
  margin-top: 30px;
}
</style>


